<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="./index.css" />
	</head>

	<body>
		<h2>↓滚轮滚一下呗↓</h2>
		<div class="bg">
			<span>Hello</span>
		</div>
		<h1>欢迎来到<br />fafeio的前端世界</h1>
		<script type="text/javascript">
			// 获取背景对象
			const bg = document.querySelector('.bg');
			// 监听滚轮事件
			document.addEventListener('scroll', function () {
				// 获取当前滚轮的位置
				const scrollY = window.scrollY;
				const scrollX = window.scrollX;
				if (scrollY != 0) {
					// 滚轮位置不等于0时,修改背景的定位加上滚轮的值
					bg.style.backgroundPosition =
						'calc(80% + ' +
						scrollY +
						'px) calc(80% + ' +
						scrollX +
						'px)';
				} else {
					// 否则清空背景的定位
					bg.style.backgroundPosition = '';
				}
			});
		</script>
	</body>
</html>
